<template>
  <div>
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">分产品年度目标测算</div>
      </div>
    </div>
    <el-form inline :model="form" label-width="70px" size="mini" style="margin-top:10px">
      <el-form-item label="年份">
        <el-date-picker
          v-model="form.year"
          type="month"
          placeholder="请选择"
          value-format="yyyyMM"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="区域">
        <dx-cascader
          :area_id.sync="form.areaId"
          :area_name.sync="form.areaName"
          :area_lvl.sync="form.areaLvl"
          ref="cascader"
        />
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="search"
          >查询</el-button
        >
        <el-button size="small" type="warning" @click="handle_export(1)"
          >导出</el-button
        >
        <el-button size="small" type="warning" @click="handle_export(2)"
          >二级导出</el-button
        >
        <el-button size="small" type="warning" @click="handle_export(3)"
          >三级导出</el-button
        >
      </el-form-item>
    </el-form>
    <div class="tableBox" style="margin-top: 10px">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        style="width: 100%"
        class="tableTh28"
        border
        stripe
        ref="table"
        :height="tableHeight+''"
        :span-method="spanMethod"
        :header-cell-class-name="headerClass"
        :cell-class-name="cellClassName"
      >
        <el-table-column v-for="(item,i) in columns1" :key="item.label+i" :label="item.label">
          <el-table-column
            v-for="child in item.children"
            :key="child.prop"
            :label="child.label"
            :prop="child.prop"
            :min-width="child.minWidth"
          ></el-table-column>
        </el-table-column>
        <el-table-column v-for="(item,i) in columns2" :key="item.label+i" :label="item.label">
          <el-table-column
            v-for="child in item.children"
            :key="child.prop"
            :label="child.label"
            :prop="child.prop"
            :min-width="child.minWidth"
          ></el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import { mergeSpan } from "@/utils/mixin";
import { downLoadExcelParams } from "@/utils/zipdownload.js"
export default {
  data() {
    return {
      form: {
        year: "",
        areaId: "",
      },
      tableLoading: false,
      tableData: [],
      columns1: [],
      columns2: [],
      spanArr: [],
      tableHeight: window.innerHeight - 216,
    };
  },
  created() {
    this.form.year = this.moment().subtract(1, "months").format("YYYYMM");
    this.form.areaId = JSON.parse(getSessionStorage("accountInfo")).areaId;
    window.addEventListener("resize", this.resizeTable);
    this.getData();
  },
  beforeDestroy(){
    window.removeEventListener("resize", this.resizeTable);
  },
  methods: {
    //查询
    search() {
      this.getData();
    },
    getData() {
      this.tableLoading = true;
      $budgetAPI.selectRptReportDataGz(
        { token: getCookie("token"), areaId: this.form.areaId, year: this.form.year },
        (res) => {
          this.alertError(res);
          if (res.code == 0) {
            const { data, keys, head0, head3, indexvalues } = res.content;
            this.columns1 = [{label: head0[0], children: []}];
            this.columns2 = [];

            for(let i = 0; i <= 3; i++){
              this.columns1[0].children.push({label: "", prop: keys[i]})
            }

            head3.forEach(it => {
              indexvalues.push({class1: "本年年度目标", horizonIndexName: it});
            })
            indexvalues.forEach((it,i) => {
              let obj = this.columns2.find(col => col.label === it.class1);
              let prop = keys[i+4];
              if(obj){
                let minWidth = undefined;
                if(prop === "conditionExpress") minWidth = '140';
                obj.children.push({
                  label: it.horizonIndexName,
                  prop,
                  minWidth
                })
              } else {
                this.columns2.push({
                  label: it.class1,
                  children: [{ label: it.horizonIndexName, prop }]
                })
              }
            });

            this.tableData = data;
            this.spanArr = mergeSpan(this.tableData, ['class1', 'class2', 'class3', "verticalIndexName"]);
          };
          this.mergeRow();
          this.tableLoading = false;
        },
        (err) => {
          this.tableLoading = false;
        }
      );
    },
    // setWidth(prop){
    //   if(prop === 'class1' || prop === 'class2' || prop === 'indexWeight') return '70';
    //   if(prop === 'verticalIndexName') return '80';
    //   if(prop === 'conditionExpress') return '85';
    //   return undefined;
    // },
    handle_export(lvl){
      const form = { token: getCookie("token"), areaId: this.form.areaId, year: this.form.year };
      if(lvl == 1){
        downLoadExcelParams(
          "/incomeTrack/exportRptReportDataGz", 
          form,
          form.year + "码号收入测算"
        );
        return;
      }
      if(lvl == 2){
        downLoadExcelParams(
          "/incomeTrack/exportTwoRptReportDataGz", 
          form,
          form.year + "码号收入测算-二级导出"
        );
        return;
      }
      if(lvl == 3){
        downLoadExcelParams(
          "/incomeTrack/exportThereRptReportDataGz", 
          form,
          form.year + "码号收入测算-三级导出"
        );
        return;
      }
    },
    spanMethod({ rowIndex, columnIndex }){
      if(columnIndex <= 3){
        return this.spanArr[rowIndex][columnIndex];
      }
    },
    headerClass({rowIndex, columnIndex}){
      if (rowIndex === 1 && columnIndex <= 3) {
        return 'row-display';
      }
      if (rowIndex === 0 && columnIndex === 0) {
        return 'header-row-rowspan-2';
      }
    },
    cellClassName({rowIndex, columnIndex, row, column}){
      if(row.class2 === '政企专线'){
        if(columnIndex == 1) return "row-colspan-2";
        else if(columnIndex == 2) return 'row-display';
      }
    },
    async mergeRow(){
      await this.$nextTick();
      document.querySelector(".header-row-rowspan-2").setAttribute("rowspan", "2");
      document.querySelector(".row-colspan-2").setAttribute("colspan", "2");

    },
    resizeTable(){
      this.tableHeight = window.innerHeight - 216;
      this.$nextTick(() => { this.$refs.table.doLayout(); });
    },
  }
}
</script>
<style lang="scss" scoped>
  /deep/ .el-form-item__label {
		font-size: 13px;
		padding-right: 10px;
		line-height: 32px !important;
	}
  /deep/ .el-table {
    .el-table__row {
      td {
        padding: 0 !important;
      }
      .cell {
        padding: 2px 0 !important;
        font-size: 12px !important;
      }
    }
  }
  /deep/ .row-display {
    display: none;
  }
</style>